<template>
	<view class="uni-tab-bar">
		<view>
			<image style="width: 100%;" mode="widthFix" src="https://static.zcool.cn/zcool/mobile/images/defaultbannar.jpg"/>
			<view>
				<view class="avatar-bg">
					<view class="avatar-d">
						<image class="avatar" :src="article.avatar" />
					</view>
					<view class="author">{{article.author}}</view>
				</view>
				<view class="count-info">
					<view>
						<view>{{countData.readCount || '--'}}</view>
						<view class="count-title">人气</view>
					</view>
					<view>
						<view>{{countData.count || '--'}}</view>
						<view class="count-title">创作</view>
					</view>
					<view>
						<view>{{countData.goodCount || '--'}}</view>
						<view class="count-title">点赞数</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<block v-for="(newsItem, newsIndex) in currentList" :key="newsIndex" :id="newsItem.id">
				<view class="feed-list-item" hover-class="item-hover" @click="goDetail(newsItem)">
					<view class="item-pic-v">
						<!-- <image mode="widthFix" class="image avatar item-pic" :src="newsItem.pic" /> -->
						<image mode="widthFix" class="image item-pic" :class="{lazy:!newsItem.show}" :data-index="newsIndex" @load="imgOnLoad" :src="newsItem.show?newsItem.pic:''" />
						<image mode="widthFix" class="image item-pic placeholder" :class="{loaded:newsItem.loaded}" src="../../static/img/common/default_w780_585h.png" />
					</view>
					<view>
						<text class="item-title">{{newsItem.title}}</text>
					</view>
					<view class="item-type-v">
						<text class="item-type">{{newsItem.type}}</text>
					</view>
					<view class="item-info-v">
						<text class="item-info">{{newsItem.readCount}}查看 - {{newsItem.goodCount}}点赞</text>
					</view>
				</view>
			</block>
			<view v-if="showLoading" class="feed-list-item" hover-class="item-hover" style="margin-bottom: 120upx;">
				<view class="feed-list-item-title-area">
					<text class="align-center-vertical" style="width: 100%;text-align: center;line-height: 120upx;color: #cbcbcb;">正在加载数据，请稍后...</text>
				</view>
			</view>
		</view>
	</view> 
</template>

<script>
	let utils = require("@/common/util.js")
	export default {
		data() {
			return {
				showLoading: true,
				scrollLeft: 0,
				refreshing: false,
				refreshText: '下拉可以刷新',
				currentList: [],
				requestParams:{size: 10, channel: 'weapp'},
				countData:{},
				article:{}
			};
		},
		onLoad: function(event) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try {
				this.article = JSON.parse(decodeURIComponent(event.query));
			} catch (error) {
				this.article = JSON.parse(event.query);
			}
			uni.setNavigationBarTitle({
				title: this.article.author
			});
			this.requestParams.wd = this.article.authorId;
			this.getCount();
			this.getList();
			this.article.avatar = this.article.avatar.replace('80w_80h','750w_750h');
		},
		onPullDownRefresh(event){
			this.refreshText = '正在刷新...';
			this.refreshing = true;
			this.getList();
		},
		onReachBottom(event){
			this.getList(2);
		},
		onPageScroll() {
			this.loadImg();
		},
		onShareAppMessage() {
			return {
				title: this.article.author,
				path: '/pages/article/user?query=' + encodeURIComponent(JSON.stringify(this.article))
			}
		},
		methods:{
			getList(action = 1) {
				var that = this;
				if (action === 1) {
					that.requestParams.page = 1;
				}
				that.showLoading = true;
				uni.request({
					url: 'https://bukaa.cn/api-cms/article/findByUser',
					data: that.requestParams,
					success: (result) => {
						var data = result.data;
						if (data.status === 'ok') {
							var feeds = data.data.list;
							if (feeds && feeds.length > 0) { // 如果有返回数据
								const data = feeds.map((news) => {
									return {
										id: news.id,
										article_type: 1,
										postdate: utils.getDateDiff(utils.formatTime(new Date(news.createTime))),
										title: news.title.length > 15 ? news.title.substring(0, 15) + "...": news.title,
										pic: news.pic,
										type: news.type,
										goodCount: news.goodCount,
										readCount: news.readCount,
										comment_count: news.commentsCount,
										post_id: news.id,
										show: false,
										loaded: false
									};
								});
								if (action === 1) {
									that.currentList = data;
									that.refreshing = false;
									setTimeout(() => {
										that.loadImg();
									}, 100)
								} else {
									data.forEach((news) => {
										that.currentList.push(news);
									});
								}
							}
							that.requestParams.page += 1;
						}
					},
					complete:()=>{
						that.showLoading = false;
						uni.stopPullDownRefresh();
					}
				});
			},
			getCount(){
				var that = this;
				uni.request({
					url: 'https://bukaa.cn/api-cms/article/countByUser',
					data: {uid: that.article.authorId},
					success: (result) => {
						var data = result.data;
						if (data.status === 'ok') {
							that.countData = data.data;
						}
					}
				})
			},
			goDetail(detail) {
				uni.navigateTo({
					url: '/pages/article/detail?query=' + encodeURIComponent(JSON.stringify(detail))
				});
			},
			loadMore() {
				this.getList(2);
			},
			loadImg() {
				var that = this;
				uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
					images.forEach((image, index) => {
						if (image.top <= that.windowHeight) {
							that.currentList[image.dataset.index].show = true;
						}
					})
				}).exec()
			},
			imgOnLoad(e) {
				this.currentList[e.target.dataset.index].loaded = true
			}
		}
	}
</script>

<style>
  @import url("../../static/css/list.css");
  .avatar-bg{
	background:url(https://static.zcool.cn/zcool/mobile/images/arcbg.png);
	background-size:100% auto;
	margin-top:-200upx;
	height: 200upx;
	position:relative;
	display:flex;
	flex-flow:column;
	text-align:center;
  }
  .avatar-d{
	  display: flex;
	  margin: -66upx auto 0  !important;
	  align-items: center;
	  justify-content: center;
	  border: 0.05rem solid #fff;
	  border-radius: 50%;
	  background: #F6F6F6;
  }
  .avatar{
	  width: 150upx;
	  height: 150upx;
	  border-radius: 50%;
  }
  .count-title{
	  color: #B4B6B7;
	  font-size: 20upx;
	  margin-top: 5upx;
  }
  .author{
	  margin-top:20upx;
	  font-size: 40upx;
	  color: #333;
  }
  .count-info{
	  	padding: 0 80upx;
		margin-bottom: 20upx;
	  	justify-content: space-between;
	  	text-align: center;
	  	display: flex
  }
  .feed-list-item{
  	border-radius: 10px;
	height: 180upx;
  }
  .item-pic-v{
  	width: 40%;
  	height: 220upx;
  	align-items: left;
  	transition: opacity .3s;
  	display: inline-block;
  	float: left;
  	position: relative;
	margin-right: 20upx;
  }
  .item-pic{
  	float: left;
  	width: 100%;
  	height: auto;
  	position: absolute;
  }
  .item-title{
  	font-size: 14px;
	line-height: 60upx;
  	font-weight: 600;
  	color: #333;
  	vertical-align: middle;
  	white-space: nowrap;
  	text-overflow: ellipsis;
  	overflow: hidden;
  }
  .item-type-v{
  	height: 30upx;
  	padding: 10upx;
  }
  .item-type{
  	line-height: 40upx;
  	float: left;
  	font-size: 12px;
  	color: #bbb;
  }
  .item-info-v{
  	height: 30upx;
  	padding: 10upx;
  }
  .item-info{
  	line-height: 40upx;
  	float: left;
  	font-size: 12px;
  	color: #bbb;
  }
  .item-author-v{
  	height: 60upx;
  	padding: 10upx;
  	margin-bottom: 10upx;
  }
  .item-author-avatar{
  	width: 60upx;
  	height: 60upx;
  	border-radius: 50%;
  	float: left;
  }
  .item-author-name{
  	line-height: 60upx;
  	float: left;
  	font-size: 12px;
  	margin-left: 10upx;
  }
  .item-author-date{
  	line-height: 60upx;
  	float: right;
  	font-size: 12px;
  	color: #bbb;
  }
  
  .more {
	width: 400upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	border: 2px solid #666666;
	color: #666666;
	border-radius: 5px;
	margin: 0 auto;
  }
  .am-list-footer{
	margin-top: 30upx;
  }
</style>
